<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="名称" >
                  <el-input v-model="search.name"></el-input>
              </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
         <el-button  type="primary" @click="showDialog('insert')">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableList" stripe border class="user-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="30"></el-table-column>
      <el-table-column prop="name" label="名称" sortable width="100"></el-table-column>
      <el-table-column prop="code" label="编号" sortable width="120" > </el-table-column>
      <el-table-column prop="type" label="型号" sortable min-width="100" ></el-table-column>
      <!-- <el-table-column prop="texture" label="材质" sortable min-width="100"></el-table-column>
      <el-table-column prop="no" label="损耗系数" sortable width="120"></el-table-column>
      <el-table-column prop="managerLevel" label="管理等级" sortable width="120"></el-table-column> -->
      <el-table-column prop="enable" label="启用"  width="50"  align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.enable ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="创建人" sortable width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable width="160"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center"  width="160">
        <template slot-scope="scope">
          <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
           <el-button @click="showDialog('relation',scope.row)" type="text" size="small">关联供应商</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag width="1100px" :close-on-click-modal='false'>
      <div v-if="dialog.type==='relation'">
        <el-button type="success" @click="isShowDialog1('insert')" icon="el-icon-plus">新增</el-button>
        <el-table :data="dialog.supplierList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"  >
          <el-table-column fixed type="index" label="*"  min-width="40" align="center"></el-table-column>
          <el-table-column prop="cgSupplier.name" label="供应商名字" show-overflow-tooltip  min-width="120" align="center"></el-table-column>
          <el-table-column prop="minPurchase" label="最小采购量"   min-width="80" align="center"></el-table-column>
          <el-table-column prop="predate" label="采购提前期"  min-width="80" align="center"></el-table-column>
          <el-table-column prop="startNums" label=" 起初数" show-overflow-tooltip   min-width="80" align="center"></el-table-column>
          <el-table-column prop="price" label="单价"  min-width="100" align="center"></el-table-column>
          <el-table-column prop="creatorName" label="创建人"  min-width="100" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"  min-width="100" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="isShowDialog1('update',scope.row)" type="text" size="mini">修改</el-button>
              <el-button @click="isShowDialog1('delete',scope.row)" type="text" size="mini"><span class="cl-danger">删除</span></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-form :model="dialog.formData" ref="ruleForm1" label-width="180px" class="demo-ruleForm" :inline="true" >
        <el-form-item label="名称" prop="name">
          <el-input v-model="dialog.formData.name" class="width220" ></el-input>
        </el-form-item>
        <el-form-item label="编号" prop="code">
          <el-input v-model="dialog.formData.code" class="width220"></el-input>
        </el-form-item>
         <el-form-item label="型号" prop="type">
          <el-input v-model="dialog.formData.type" class="width220"></el-input>
        </el-form-item>
        <!-- <el-form-item label="材质" prop="texture">
          <el-input v-model="dialog.formData.texture" class="width220"></el-input>
        </el-form-item>
        <el-form-item label="损耗系数" prop="no">
          <el-input v-model="dialog.formData.no" class="width220"></el-input>
        </el-form-item>
        <el-form-item label="管理等级" prop="managerLevel">
          <el-select v-model="dialog.formData.managerLevel" placeholder="请选择管理等级" class="width220">
            <el-option value='' label="【空】"></el-option>
            <el-option value='1' label="1"></el-option>
            <el-option value='2' label="2"></el-option>
            <el-option value='3' label="3"></el-option>
          </el-select> 
        </el-form-item>-->
        <el-form-item label="启用" prop="enable" class="form-item-block">
          <el-switch v-model="dialog.formData.enable" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="创建人" prop="creatorName" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.creatorName" disabled class="width220"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.createTime" disabled class="width220"></el-input>
        </el-form-item>
        <el-form-item  class="form-item-block text-center">
          <el-button type="primary" @click="onSubmit()">确认</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-dialog>
    <!-- 管理供应商新增或修改 -->
    <el-dialog :title="dialog1.title" width="750px" center :visible.sync="dialog1.isShow" v-dialogDrag :close-on-click-modal='false'>
      <div>
        <el-form :inline="true" class="demo-form-inline" v-model="dialog1.formData" label-position="right" label-width="120px">
          <el-form-item label="物料名称" ><el-input v-model="dialog.formData.name" disabled class="width220"></el-input></el-form-item>
          <el-form-item label="物料型号" ><el-input v-model="dialog.formData.type" disabled class="width220"></el-input></el-form-item>
          <el-form-item label="供应商名称">
            <el-autocomplete  class="width220" v-model="dialog1.formData.cgSupplier.name" :fetch-suggestions="querySearchAsync" placeholder="请输入供应商名称" @select="handleSelect"></el-autocomplete>
          </el-form-item>
          <el-form-item label="采购提前期">
            <el-input v-model="dialog1.formData.predate" class="width220">
              <el-button slot="append">天</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="最小采购量"><el-input v-model="dialog1.formData.minPurchase" class="width220"></el-input></el-form-item>
          <el-form-item label="单价">
            <el-input v-model="dialog1.formData.price" class="width220" ><el-button slot="append">元</el-button></el-input>
          </el-form-item>
          <el-form-item label="起初数"><el-input v-model="dialog1.formData.startNums" class="width220"></el-input></el-form-item>
          <el-form-item label="创建人" v-if="dialog1.title==='修改供应商列表'"><el-input v-model="dialog1.formData.creatorName" disabled class="width220"></el-input></el-form-item>
          <el-form-item label="创建时间" v-if="dialog1.title==='修改供应商列表'"><el-input v-model="dialog1.formData.createTime" disabled class="width220"></el-input></el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="submitList" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import resourcesProtectionApi from 'plugins/axios/resourcesProtectionApi.js';
import {mapState} from 'vuex'
export default {
  components: {
  },
  data(){
    return {
      search:{
        name:''
      },
      loading:false,
      tableList:[],
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      dialog:{
        title:'',
        isShow:false,
        type:'',
        formData:{},
        supplierList:[]
      },
      dialog1:{
        title:'',
        isShow:false,
        type:'',
        formData:{
          cgSupplier:{
            name:''
          }
        }
      }
    }
  },
  created(){},
  mounted(){
    this.getTableList();
  },
  computed:{
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    tableHeight(){
      return this.clientHeight-184;
    }
  },
  watch: {
  },
  methods:{
    getTableList(){
      let self = this;
      let data={
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize,
        name:self.search.name
      }
      resourcesProtectionApi.cgMaterialList(data).then(res=>{
        self.tableList = res.content.records;
        self.pagination.currentPage=res.content.current;
        self.pagination.pageSize=res.content.size;
        self.pagination.total=res.content.total;
      })
      
    },
    searchBtn(){
      this.getTableList()
    },
    handleCurrentChange(current){
      this.pagination.currentPage = current;
      this.getTableList();
    },
    handleSizeChange(size){
      this.pagination.pageSize = size;
      this.getTableList();
    },
    showDialog(type,row){
      let self = this;
      self.dialog.type = type;
      self.dialog.isShow = true;
      switch(type){
        case 'insert':
          self.dialog.title = '新增采购物料清单'
          self.dialog.formData={}
          break;
        case 'update':
          self.dialog.title = '修改采购物料清单'
          self.dialog.formData=JSON.parse(JSON.stringify(row));
          break;
         case 'relation':
          self.dialog.title = '关联供应商列表'
          self.dialog.formData=JSON.parse(JSON.stringify(row));
          self.getSupplierList();
          break;
      }
    },
    onSubmit(){
      let self = this;
      resourcesProtectionApi.insertUpdateMaterial(self.dialog.type,self.dialog.formData).then(res=>{
        self.$message.success(`${self.dialog.title}成功`);
        self.dialog.isShow = false;
        self.getTableList();
      })
    },
    isShowDialog1(type,row){
      let self = this;
      self.dialog1.type = type;
      
      switch(type){
        case 'insert':
          self.dialog1.isShow = true;
           self.dialog1.title = '新增供应商';
           self.dialog1.formData={
             cgSupplier:{
               name:''
             }
           };
          break;
        case 'update':
          self.dialog1.isShow = true;
          self.dialog1.title = '修改供应商';
          self.dialog1.formData=JSON.parse(JSON.stringify(row));
          break;
        case 'delete':
          self.$confirm('是否删除此关联供应商?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            resourcesProtectionApi.deleteLinkSupplier(row.id).then(res=>{
              self.$message.success('删除成功!');
              self.getSupplierList();
            })
          }).catch(() => {});
          break;
      }
    },
    getSupplierList(){
      let self  = this;
      resourcesProtectionApi.supplierListByMateralId(self.dialog.formData.id).then(res=>{
        self.dialog.supplierList = res.content;
      })
    },
    submitList(){
      let self = this;
      let postData= self.dialog1.formData;
      self.dialog1.type==='insert' ? postData.bid = self.dialog.formData.id:'';
      resourcesProtectionApi.insertUpdateSupplierByMateralId(self.dialog1.type,postData).then(res=>{
        self.$message.success(`${self.dialog1.title}成功`);
        self.dialog1.isShow = false;
        self.getSupplierList();
      })
    },
    querySearchAsync(queryString, callback){
      resourcesProtectionApi.searchSupplierList({keyWord:queryString?queryString:''}).then(res=>{
        res.content.forEach(item=>{
          item.value = item.name;
        })
         callback(res.content);
      })
     ;
    },
    handleSelect(item){
      this.dialog1.formData.sid = item.id;
      this.dialog1.formData.supplierName = item.value;
    }
  }
}
</script>
<style lang="stylus" scoped>
</style>